<template>
	<view class="Traffic">
		<view class="nav">
			<view class="traffic">
				<view class="f">
					<view>流量转化</view>
					<view><image src="../static/management/yiwen.png" mode=""></image></view>
				</view>

				<!-- 本店流量 -->
				<view class="Our">
					<view :class="{ active: Type == 1 }" @tap="Type = 1">本店流量</view>
					<view :class="{ active: Type == 2 }" style="margin-left: 67upx;" @tap="Type = 2">同商圈流量</view>
				</view>
				
				<!-- 全部顾客 -->
				<view class="customers f_two">
					<view class="navtwo f_two">
						<view :class="{active:i === index}" v-for="(item,index) in All" @tap="add(index)" :key="index">
							{{item.name}}
						</view>
					</view>
					
					<view class="one f">
						<view>今日实时</view>
						<view><image src="../static/home/jiantouq.png" mode=""></image></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';

export default {
	data() {
		return {
			Type:1,
			All:[
				{name:'全部顾客'},
				{name:'新客'},
				{name:'老客'}
			],
			i:0
		};
	},
	components: {},
	computed: {},
	methods: {
		add(index){
			this.i = index
		}
	}
};
</script>

<style lang="scss" scoped>
.Traffic {
	.nav {
		background: #ffffff;
		.traffic {
			width: 93%;
			margin: 0upx auto;
			padding: 30upx 40upx 30upx 40upx;
			.f {
				& > view:nth-child(1) {
					font-size: 36upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #35394c;
				}
				& > view:nth-child(2) {
					image {
						width: 21upx;
						height: 21upx;
						margin-left: 15upx;
					}
				}
			}
			.Our {
				display: flex;
				align-items: center;
				margin-top: 46upx;
				border-bottom: 2upx solid #eeeeee;
               
				& > view {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					height: 60upx;
					
					
				}
				.active {
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #35394c;
					border-bottom: 3px solid #35394c;

					border-radius: 3upx;
				}
			}
			.customers{
				margin-top: 27upx;
				.navtwo{
					width: 60%;
					&>view{
						width: 122upx;
						height: 42upx;
						border: 2upx solid #EEEEEE;
						border-radius: 4upx 2upx 2upx 4upx;
						
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #35394C;
						text-align: center;
					}
					.active{
						
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #35394C;
						background: #EBEEF5;
						border: 2upx solid #35394C;
					}
				}
				.one{
					width: 30%;
					&>view:nth-child(1){
						
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
					&>view:nth-child(2){
						image{
							width: 43upx;
							height: 37upx;
							display: flex;
							margin-left: 24upx;
						}
					}
				}
			}
		}
	}
}
</style>
